<template>
  <div class="profile">
    <div class="profile-head">
      <div class="head-img">
        <img src="/dj.jpg" alt="" usemap="planetmap" >
      </div>
<map id="planetmap">
 <area shape ="rect" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
</map>
      <ul class="head-uu">
        <li>
          <div class="login" @click="loginIn" v-if=" usertoken  " >
            立即登录
          </div>
        </li>
        <li>
          <p>积分：347</p>
        </li>
        <li @click="outlogin">
          退出登录
        </li>
      </ul>
    </div>
    <div class="profile-zmd">
      <van-icon name="volume-o" class="red" />
      <marquee direction="left" class="red" >新上线更稳定的付费快递查询接口</marquee>
      <span></span>
    </div>
    <div class="profile-indent">
      <div class="dd border-bottom">
        <section>
          <van-icon name="notes-o" class="orange"/>
          <span>我的订单</span>
        </section>
        <van-icon name="arrow" />
      </div>
      <div class="profile-types">
        <div>
          <van-icon name="paid" class="gray" />
          <p>待付款</p>
        </div>
         <div>
          <van-icon name="send-gift-o" class="gray" />
          <p>待发货</p>
        </div>
         <div>
          <van-icon name="logistics" class="gray" />
          <p>待收货</p>
        </div>
         <div @click="gotopay">
          <van-icon name="comment-o" class="gray" />
          <p>待评价</p>
        </div>      </div>
      <div class="profile-ico">
         <div>
          <van-icon name="gold-coin-o" class="red" />
          <p>我的余额</p>
        </div>
        <div>
          <van-icon name="edit" class="red" />
          <p>我的砍价</p>
        </div>
        <div>
          <van-icon name="coupon-o" class="orange" />
          <p>我的礼券</p>
        </div>
        <div>
          <van-icon name="star-o" class="orange" />
          <p>我的收藏</p>
        </div>
        <div>
          <van-icon name="location" class="skyblue" />
          <p>我的地址</p>
        </div>
        <div>
          <van-icon name="service-o" class="skyblue" />
          <p>联系客服</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "profile",
  data() {
    return {
      usertoken:''
    };
  },
  created() {
    this.usertoken = localStorage.getItem('token')
  },
  methods: {
    loginIn(){
      this.$router.push('login')
    },
    outlogin(){
      // this.$store.state.token= ""
      this.$store.commit('addtoken', " ")
    },
    gotopay(){
      this.$router.push('/topay')
    }
  },
};
</script>

<style lang="scss" scoped>
.profile {
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
  .profile-head {
    width: 100%;
    height: 3.1rem;
    background-color: #c1b18f;
    display: flex;
    flex: start;
    align-items: center;
    padding: 0 0.5rem;
    .head-img {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 2rem;
      border: 1px solid #cccccc;
      img{
        width: 100%;
        height: 100%;
      border-radius: 2rem;
      }
    }
    .head-uu {
      width: calc(100% - 2rem);
      height: 3.1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0.3rem 0;
      color: white;
      font-size: 0.26rem;
      margin-left: 0.5rem;
      li {
        margin-top: 0.4rem;
        // line-height: 1rem;
      }
      p {
        width: 2rem;
        height: 0.6rem;
        display: flex;
        align-items: center;
        background-color: #b3a078;
        border-radius: 0.1rem;
        padding: 0.2rem;
      }
    }
  }
}
.profile-zmd{
  width: 100%;
  height: 0.8rem;
  padding: 0 0.5rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.26rem;
}
.profile-indent{
  width: 100%;
  height: 2.6rem;
  background-color: white;
  margin-top: 0.2rem;
}
.dd{
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.4rem;
  font-size: 0.32rem;
  section{
    width: 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.4rem;
    color: orange;
    span{
     font-size: 0.24rem;
     color: black;
    }
  }
}
.profile-types{
  width: 100%;
  height: 1.6rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  div{
    font-size: 0.6rem;
      text-align: center;

    p{
      font-size:0.28rem;
    }
  }
}
.profile-ico{
  width: 100%;
  height: 3.2rem;
  margin-top: 0.2rem;
  background-color: white;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  div{
    width: calc(100%/3);
    height: clac(100%/2);
    text-align: center;
    font-size: 0.6rem;
    p{
      font-size:0.28rem;
    }
  }
}
.login{
  font-size: 0.4rem;
}
</style>
